<template>
	<view class="publish">
		<view class="publish-plate-1">
			<image :src="goodsData.goods_pic_one" mode=""></image>
			<view class="goods-info">
				<text>{{goodsData.goods_name}}</text>
				<text>¥{{goodsData.sub_prices}}</text>
			</view>
		</view>
		<view class="publish-plate-2">
			<view class="title">
				<text>整体评价</text>
				<view class="pingjia">
					<view class="item" :class="3 == activeIndex? 'active':''" @click="onChoose(3)">
						<image :src="3 == activeIndex? '../../../static/haoping_bg.png':'../../../static/haoping.png' " mode="widthFix"></image>
						<text>好评</text>
					</view>
					<view class="item" :class="2 == activeIndex? 'active':''" @click="onChoose(2)">
						<image :src="2 == activeIndex? '../../../static/zhongping_bg.png':'../../../static/zhongping.png' " mode="widthFix"></image>
						<text>中评</text>
					</view>
					<view class="item" :class="1 == activeIndex? 'active':''" @click="onChoose(1)">
						<image :src="1 == activeIndex? '../../../static/chaping_bg.png':'../../../static/chaping.png' " mode="widthFix"></image>
						<text>差评</text>
					</view>
				</view>
			</view>
			<view class="tags">
				<view class="item" v-for="(item,index) in tagsList" :key="index">
					{{item.label_name}}
				</view>
			</view>
			<view class="content-txt">
				<textarea v-model="contentTxt" placeholder="说说你的心得吧～" :placeholder-class="plStyle" />
			</view>
			<view class="content-img">
				<u-upload :action="action"  @on-uploaded="onUploaded" max-count="5"></u-upload>
			</view>
			<view class="niming">
				<view class="left">
					<u-checkbox-group shape="circle"  active-color="#D1AA56">
						<u-checkbox 
							v-model="checked"
						>匿名</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="right">
					您写的评价会以匿名的形式展现
				</view>
			</view>
		</view>
		<view class="publish-plate-3">
			<view class="item">
				<text>商品评价</text>
				<view class="star">
					<u-rate :count="count" v-model="goodsStar" active-color="#D1AA56"></u-rate>
				</view>
			</view>
			<view class="item">
				<text>物流服务</text>
				<view class="star">
					<u-rate :count="count" v-model="logisticsStar" active-color="#D1AA56"></u-rate>
				</view>
			</view>
			<view class="item">
				<text>服务态度</text>
				<view class="star">
					<u-rate :count="count" v-model="serveStar" active-color="#D1AA56"></u-rate>
				</view>
			</view>
		</view>
		<view class="publish-plate-4">
			<button class="bg-btn" @click="submitPublish">提交评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				tagsList:[],
				contentTxt:'',
				action: this.$Url + '/index.php/app/utils/upload_pic_oss',
				videoUrl:'',
				imgUrl:[],
				checked:false,
				goodsStar:0,//商品评价
				logisticsStar:0,//物流评价
				serveStar:0,//服务评价
				count:5,
				goodsData:'',
				activeIndex:0,
				order_id:0
			};
		},
		onLoad(option) {
			this.id = option.id
			this.order_id = option.order_id
			console.log(option)
			this.getOrderInfo()
			this.getGoodsTags()
		},
		created() {
		},
		methods:{
			// 所有图片上传完毕
			onUploaded(e){
				let imgArr = []
				for (let i = 0; i < e.length; i++) {
					imgArr.push(e[i].response.data)
				}
				this.imgUrl = imgArr
			},
			// 提交评论结果
			submitPublish(){
				let num = 0
				if(this.checked == false){
					num = 0
				}else{
					num = 1
				}
				uni.request({
				    url:this.$Url +'/index.php/App/Order/addEvaluate',
				    method:'POST',
				    data:{
				       order_item_id:this.order_id,
					   overall_evaluate:this.activeIndex,
					   goods_evaluate:this.goodsStar,
					   logistics_service:this.logisticsStar,
					   service_manner:this.serveStar,
					   evaluate_content:this.contentTxt,
					   evaluate_pic:this.imgUrl.toString(),
					   is_anonymity:num
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:'评价完成',
								icon:'success',
								duration:1200
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'../../mine/order/order'
								})
							},1200)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 点击选择评价
			onChoose(number){
				this.activeIndex = number
			},
			// 请求订单信息
			getOrderInfo(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/goodsDetail',
				    method:'POST',
				    data:{
				       goods_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.goodsData = res.data.data.goods_mes
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求商品标签
			getGoodsTags(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/getCommentLabel',
				    method:'POST',
				    data:{
				       goods_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.tagsList = res.data.data
						} else{
							console.log(res.data.msg)
						}
				    }
				})
			},
			// tabs切换
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped> 
.publish{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-top: 10upx;
	.publish-plate-1{
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 25upx;
		margin-bottom: 10upx;
		image{
			width: 124upx;
			height: 124upx;
			margin-right: 27upx;
		}
		.goods-info{
			display: flex;
			flex-direction: column;
			color: #333;
			font-size: 24upx;
			text:first-child{
				margin-bottom: 20upx;
			}
		}
	}
	.publish-plate-2{
		padding: 0 30upx;
		background-color: #fff;
		.title{
			height: 84upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #dddddd;
			>text{
				color: #333;
				font-size: 34upx;
			}
			.pingjia{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 465upx;
				.item{
					display: flex;
					align-items: center;
					image{
						width: 46upx;
						margin-right: 14upx;
					}
					text{
						font-size: 30upx;
						color: #9e9e9e;
					}
				}
				.active{
					text{
						color: $zhuti-color;
					}
				}
			}
		}
		.tags{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				color: $zhuti-color;
				border: 1upx solid $zhuti-color;
				border-radius: 40upx;
				margin-top: 20upx;
				padding: 12upx 40upx;
				font-size: 28upx;
				margin-right: 26upx;
			}
		}
		.content-txt{
			margin-top: 40upx;
			.plStyle{
				color: #999;
			}
		}
		.content-img{
			padding-bottom: 20upx;
			border-bottom: 1upx solid #ddd;
		}
		.niming{
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.right{
				color: #cdcdcd;
				font-size: 24upx;
			}
		}
	}
	.publish-plate-3{
		padding: 30upx;
		background-color: #fff;
		margin-top: 10upx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 35upx;
			text{
				margin-right: 30upx;
				font-size: 30upx;
			}
		}
	}
	.publish-plate-4{
		padding-top: 50upx;
		padding-bottom: 120upx;
		button{
			width: 300upx;
			height: 90upx;
			font-size: 36upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
